<template>
	<view class="order-box flex-column" :class="{'tabbar-page-bottom': type == 2}" :style="boxStyle">
		<view class="tabs-box" :class="{'line-box-shadow': actTab == 2}" v-if="tabsList.length == 2">
			<qh-tabs :list="tabsList" flexSpace flexSpaceType="between" :lRPadding="200" v-model="actTab"></qh-tabs>
		</view>
		<direct-pay-order class="direct-pay-order" v-if="actTab == 2"></direct-pay-order>
		<view class="myOrder line-box-shadow" v-show="actTab == 1">
			<block v-for="(item, index) in orderNav" :key="index">
				<view class="order-check-item" :class="{'on': item.type == orderNavIndex}" @tap="changeOrderState(item.type)">{{item.name}}</view>
			</block>
		</view>
		<view class="flex-column-100" v-show="actTab == 1">
			<scroll-view class="scroll-view" scroll-y refresher-background="transparent" @scrolltolower="getOrderList" refresher-enabled
				:refresher-threshold="30" @refresherrefresh="refresherrefresh" :refresher-triggered="isRefresh">
				<view class="scroll-view-content">
					<view class="orderList" v-for="(item, index) in orderList" :key="index" @tap.stop="toOrderDetail(item)">
						<view class="order-title flex-cn">
							<view class="store-info flex-cn">
								<view>
									<image class="store-img" :src="item.store_image" mode="aspectFit"></image>
								</view>
								<view class="store-name text-ellipsis">{{item.store_name}}</view>
							</view>
							<view class="order-state flex-cn">
								<text style="margin-right: 20rpx;">{{item.type_name=='线上' ? item.state_msg : item.type_name}}</text>
								<text class="qh-rt-single qh-rt-you order-state-right-icon"></text>
								<!-- <image style="width: 12rpx;height: 24rpx;background-size:contain" src="/static/images/arrow-1.png" mode=""> -->
								</image>
							</view>
						</view>
						<view class="orderList-box">
							<view class="order-body">
								<view class="order-img">
									<scroll-view class="scroll-img" scroll-x="true">
										<template v-if="item.goods_info.length > 1">
											<image class="el-img" :style="{marginRight: (index == item.goods_info.length - 1) ? '15rpx' : ''}"
												v-for="(element, index) in item.goods_info" :key="element.id" :src="element.goods_img" mode="aspectFit">
											</image>
										</template>
										<template v-else>
											<view style="display: flex;" v-for="(element, index) in item.goods_info" :key="element.id">
												<image class="el-img" :style="{marginRight: (index == item.goods_info.length - 1) ? '15rpx' : ''}"
													style="min-width:120rpx" :src="element.goods_img" mode="aspectFit">
												</image>
												<view class="goods-info">
													<view style="font-szie:24rpx">{{element.goods_name}}</view>
													<view style="font-size:20rpx">{{element.sku_name}}</view>
												</view>
											</view>
										</template>
									</scroll-view>
									<view class="ellipsis">
										<view class="goods_number">
											<block>共</block>
											<block>
												<text>{{item.goods_info.length > 0 ? item.goods_info.length : 0}}</text>
											</block>
											<block>件</block>
										</view>
									</view>
								</view>
								<view class="order-info">
									<view class="orderCon">
										<view class="order-font" style="margin-top: 10rpx;">
											<text>订单编号：</text>
											<text cacatchlongtap="copy" :data-order_no="item.order_no">{{item.order_no}}</text>
										</view>
										<view class="order-font">
											<text>下单时间：</text>
											<text>{{item.add_time}}</text>
										</view>
										<view class="order-font">
											<text>订单总价：</text>
											<text>￥{{item.all_money}}</text>
										</view>
									</view>
									<view class="order-genre">
										<image v-if="item.order_genre == 2" src="https://safood.supplyocta.com/Public/MallSmallApp/group-order.png" mode="aspectFit"></image>
										<image v-if="item.order_genre == 3" src="https://www.xzthealth.com/Public/MallSmallApp/kill-order.png" mode="aspectFit"></image>
										<image v-if="item.order_genre == 4" src="https://www.xzthealth.com/Public/MallSmallApp/pre-order.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="order-bottom">
							<view class="order-btn">
								<view class="orderqrcode">
									<view class="bnt-comm btn-cancel" @tap.stop="showorderqrcode(item.order_no,1)">订单号</view>
								</view>
								<block v-if="true && item.type_name=='线上'">
									<view class="bnt-comm btn-act" @tap.stop="goBlessInfoPage(item.id)" v-if="item.button.extraction_code==1">祝福码</view>
									<view class="bnt-comm btn-act" v-if="item.button.pick_code==1" @tap.stop="showorderqrcode(item.pick_code,2)">取货码</view>
									<view class="bnt-comm btn-act" v-if="item.button.remind_send == 1" @tap.stop="remindShipment(index)">提醒发货</view>
									<view class="bnt-comm btn-cancel" v-if="item.button.cancel_order == 1" @tap.stop="cancelOrder(index)">取消订单</view>
									<view class="bnt-comm btn-cancel" v-if="item.button.cancel_pay == 1" @tap.stop="cancelPay(index)">取消订单</view>
									<!-- <view class="bnt-comm btn-act" v-if="item.button.see_logistics == 1" @tap.stop="seeLogistics(item)">查看包裹</view> -->

									<view class="bnt-comm btn-act" @tap.stop="seeLogistics(item)">查看包裹</view>
									<view class="bnt-comm btn-cancel" v-if="item.button.see_rider==1" @tap.stop="rider(item)">骑手信息</view>
									<view class="bnt-comm btn-act" v-if='item.button.receipt == 1' @tap.stop="confirmReceipt(index)">确认收货</view>
									<view class="bnt-comm btn-act" v-if="item.button.evaluate == 1" @tap.stop="toEvaluate(item)">评价</view>
									<view class="bnt-comm btn-cancel" v-if="item.button.service == 1" @tap.stop="toService(item)">售后</view>
									<view class="bnt-comm btn-act" v-if="item.button.pay_status == 1" @tap.stop="toPay(item)">支付</view>
									<view class="bnt-comm btn-act" v-if="item.button.tail_pay_status == 1" @tap.stop="toPay(item)">付尾款</view>
								</block>
							</view>
						</view>
					</view>
					<qh-loading value v-if="showLoading" row size="small" text="加载中"></qh-loading>
					<qh-loaded-tip v-else-if="!showLoading && !canLoad" :text="!orderList.length ? '暂无订单数据' : '没有更多了'"></qh-loaded-tip>
				</view>
			</scroll-view>
		</view>
		<view class="qrcodealert" v-show="isshowbarcode" @click="cancelbarcode">
			<view class="qrcodealertinner" @click.stop="copy(order_code)">
				<view>{{tipmsg}}</view>
				<!-- 此方法在支付宝小程序中无法生成条形码,改用第三方插件uni_modules中wmf-code -->
				<!-- <canvas disable-scroll="true" class="position-canvas" canvas-id="barcode"></canvas> -->
				<w-barcode :options="barCodeoptions"></w-barcode>
				<view class="order-code-margin">{{order_code}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp().globalData;
	var wxbarcode = require("@/utils/index.js");

	import directPayOrder from '@/components/direct-pay-order/direct-pay-order.vue'

	export default {
		name: 'order-list',
		components: {
			directPayOrder
		},
		props: {
			type: {
				type: [String, Number],
				default: 1
			},
		},
		data() {
			return {
				tabsList: [],
				actTab: 1,
				onLoaded: false,
				orderNav: [{
						name: "全部",
						type: 1,
					},
					{
						name: "待付款",
						type: -1,
					},
					{
						name: "待发货/自取",
						type: 2,
					},
					{
						name: "待收货",
						type: 3,
					},
					{
						name: "待评价",
						type: 4,
					},
				],
				showLoading: false,
				orderNavIndex: 1,
				order_genre: 1, //1普通订单  2拼团订单  3秒杀订单  4预售订单
				isshowbarcode: false,
				page: 1,
				canLoad: true,
				orderList: [],
				order_code: "",
				tipmsg: "",
				isRefresh: false,
				barCodeoptions: {
					width: 600,
					height: 200,
					code: ''
				},
			};
		},
		computed: {
			boxStyle() {
				return `height: calc(100vh - ${this.$store.statusBarHeight + 44}px)`;
			},
		},
		methods: {
			async onLoads(options) {
				if (this.type == 2) {
					// #ifdef MP-ALIPAY
					if (JSON.stringify(options) == '{}') {
						options = my.getLaunchOptionsSync().query;
					}
					// #endif
					if (options && (options.store_id)) {
						this.$store.store_id = options.store_id;
					}
				}
				if (!options) options = {};

				await this.$onLaunched;

				this.orderNavIndex = options.nav ? options.nav : 1;
				this.order_genre = options.genre ? options.genre : 0;
				this.refreshOrder();

				this.onLoaded = true;

				this.getPermission();
			},
			async onShows() {
				await this.$onLaunched;
				if (this.onLoaded) {
					this.refreshOrder();
				}
			},
			//去支付、付尾款
			async toPay(item) {
				if (item.button.pay_status == 1) {
					uni.navigateTo({
						url: `/pages/order/waitPay/waitPay?order_no=${item.order_no}&money=${item.all_money}`
					});
				} else {
					//预售支付尾款
					const {
						status,
						message
					} = await this.$request('SmallProgramApi/Advance/advance_tail_info', {
						order_no: item.order_no
					})
					if (status == 1) {
						uni.navigateTo({
							url: `/pages/order/waitPay/waitPay?order_no=${item.order_no}&money=0`,
						});
					} else {
						uni.showModal({
							title: '错误提示',
							confirmText: '确定',
							content: message,
							showCancel: false,
						});
					}
				}
			},
			//查看物流
			seeLogistics(item) {
				// console.log('88888888888888'  ,item)
				// uni.navigateTo({
				// 	url: '/pages/order/logistics/logistics' + `?order_no=${item.order_no}&store_id=${item.store_id}`
				// });

				// uni.navigateTo({
				// 	url: '/pages/order/SecureParcel/SecureParcel' + `?order_no=${item.order_no}&store_id=${item.store_id}`
				// });

				uni.navigateTo({
					url:'/pages/order/SecureParcel/SecureParcel'+ `?order_no=${item.order_no}&store_id=${item.store_id}&order_id=${item.id}`,
				});
				
			},
			// 复制
			copy(order_no) {
				uni.setClipboardData({
					data: order_no,
				});
			},
			//骑手信息
			rider(item) {
				uni.navigateTo({
					url: '/pages/index/rider/rider' + '?order_no=' + item.order_no
				});
			},
			//取消订单（已支付）
			cancelOrder(index) {
				uni.showModal({
					title: '提示',
					content: '订单只能取消一次，撤销后将不能再次取消，您要继续操作吗？',
					success: async (re) => {
						if (!re.confirm) return;
						const {
							status,
							message
						} = await this.$request('SmallProgramApi/Order/doRefund_v3', {
							order_no: this.orderList[index].order_no,
							type: 1,
						});
						if (status == 1) {
							uni.showModal({
								title: '提示',
								content: message,
								showCancel: false,
							});
							this.orderList[index].button = {
								cancel_order: 0,
								cancel_pay: 0,
								evaluate: 0,
								pay_status: 0,
								pick_code: 0,
								receipt: 0,
								remind_send: 0,
								see_logistics: 0,
								see_rider: 0,
								service: 0,
								tail_pay_status: 0,
							};
							this.orderList[index].state_msg = '已申请售后';
						} else if (status == 2) {
							uni.showToast({
								title: message,
								icon: 'none',
								duration: 1500,
								mask: false
							});
							this.refreshOrder();
						} else {
							uni.showToast({
								title: message,
								icon: 'none',
								duration: 1500,
								mask: false
							});
						}
					}
				});
			},
			//取消订单（未支付）
			async cancelPay(index) {
				const {
					status,
					message
				} = await this.$request('SmallProgramApi/Order/cancelPay', {
					order_no: this.orderList[index].order_no,
				});
				if (status == 1) {
					uni.showToast({
						title: message,
						duration: 1000,
					});
					this.orderList.splice(index, 1);
					this.empty = this.orderList.length ? false : true;
				} else {
					uni.showToast({
						title: message,
						icon: 'none',
						duration: 1500,
					});
				}
			},
			//刷新订单列表
			async refreshOrder() {
				this.canLoad = true;
				this.page = 1;
				await this.getOrderList();
			},
			// 切换订单状态
			changeOrderState(index) {
				if (index != this.orderNavIndex) {
					this.orderNavIndex = index;
					this.refreshOrder();
				}
			},
			//提醒发货
			async remindShipment(index) {
				const {
					status,
					message
				} = await this.$request('SmallProgramApi/Order/userRemind', {
					bill_id: this.orderList[index].id,
					type: 1,
				});
				if (status == 1) {
					uni.showToast({
						title: message,
						duration: 1000,
						mask: false
					});
					this.orderList[index].button.remind_send = 0;
				} else {
					uni.showToast({
						title: message,
						icon: 'none',
						duration: 1500,
						mask: false
					});
				}
			},
			//评价
			toEvaluate(item) {
				uni.navigateTo({
					url: '/pages/order/evaluate/evaluate' + '?bill_id=' + item.id
				});
			},
			//确认收货
			confirmReceipt(index) {
				uni.showModal({
					content: '是否确认收货?',
					showCancel: true,
					success: async (res) => {
						if (!res.confirm) return;
						const {
							status,
							message
						} = await this.$request('SmallProgramApi/Order/userReceive', {
							bill_id: this.orderList[index].id,
							type: this.orderList[index].order_genre,
						})
						if (status == 1) {
							uni.showToast({
								title: message,
								icon: 'success',
								duration: 1500,
								mask: false
							});
							this.orderList[index].status = 3;
							this.orderList[index].state = '已完成';
							this.orderNavIndex = 4;
							this.refreshOrder();
						} else {
							uni.showToast({
								title: message,
								icon: 'none',
								duration: 1500,
								mask: false
							});
						}
					}
				});
			},
			//显示条码
			showorderqrcode(code, type) {
				if (code == 0) {
					uni.showToast({
						title: '已提货',
						icon: 'none',
						duration: 1000,
						mask: false
					});
					return;
				}
				this.setData({
					isshowbarcode: true,
					order_code: code,
					tipmsg: type == 2 ? '提货码' : '订单号'
				});
				this.barCodeoptions.code = code;
			},
			//关闭条码
			cancelbarcode() {
				if (this.isshowbarcode) {
					this.setData({
						isshowbarcode: false,
						order_code: ''
					});
				}
			},
			//祝福详情
			async goBlessInfoPage(id) {
				uni.navigateTo({
					url: '/pages/order/blessingDetail/blessingDetail?orderId=' + id
				})

			},

			//订单详情
			toOrderDetail(item) {
				uni.navigateTo({
					url: "/pages/order/myOrderDetail/myOrderDetail?order_no=" + item.order_no
				});
			},
			//售后
			toService(item) {
				uni.navigateTo({
					url: "/pages/order/serviceChooseGood/serviceChooseGood" + "?order_no=" + item.order_no
				});
			},
			//获取订单列表
			async getOrderList() {
				if (this.showLoading || !this.canLoad) return;
				this.showLoading = true;

				let param = this.order_genre ? {
					page: this.page,
					order_status: this.orderNavIndex,
					order_genre: this.order_genre,
					order_type: 1
				} : {
					page: this.page,
					order_status: this.orderNavIndex,
					order_type: 1
				}

				const {
					status,
					data
				} = await this.$request('SmallProgramApi/Order/orderList_v4', param, false);

				if (status == 1) {
					if (this.page == 1) {
						this.orderList = data;
					} else {
						this.orderList.push.apply(this.orderList, data);
					}
					this.canLoad = data.length < 10 || data.length == 0 ? false : true;
					this.showLoading = false;
					this.page++;
					this.$forceUpdate();
				} else {
					this.orderList = [];
					this.canLoad = false;
					this.showLoading = false;
				}
			},
			// 下拉刷新
			async refresherrefresh() {
				this.isRefresh = true;
				await this.refreshOrder();
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 800
				});
				this.isRefresh = false;
			},
			//获取插件权限
			async getPermission() {
				const {
					status,
					data
				} = await this.$request('SmallProgramApi/Plug/getPlugPermissions');
				if (status == 1 && data.plug.aggregationcode) {
					this.tabsList = [{
							value: 1,
							name: '其它订单'
						},
						{
							value: 2,
							name: '聚合码订单'
						}
					];
				}
			},
		}
	};
</script>
<style>
	@import "./order-list.css";

	.tabs-box {
		background-color: #FFFFFF;
		z-index: 3;
	}

	/* 
	.uni-nav-bar-text {
		font-size: 36rpx !important;
	} */
	.goods-info {
		/* width: calc(100% - 200rpx); */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.goods-info>view {
		white-space: normal;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
		color: #999;

	}

	.direct-pay-order {
		width: 100%;
		flex: 1;
		overflow: hidden;
		padding: 0;
	}
</style>
